<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>我的 - 数智化赋能“微情境·微宣讲”红色实践活动</title>

  <link rel="stylesheet" href="../templates/h5/assets/swiper-bundle.min.css">
  <script src="../templates/h5/assets/tailwindcss3.4.17.css"></script>
  <link href="../templates/h5/assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="../templates/h5/assets/jquery.min.js"></script>
  <script src="../templates/h5/assets/vconsole.min.js"></script>
  <script>
    // var vConsole = new VConsole();
    // console.log('Hello world');
  </script>

  <script>
    // 配置Tailwind自定义颜色（红色主题）
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#b71211', // 主红色
            secondary: '#FFD700', // 辅助金色
            red: {
              700: '#B91C1C',    // 稍浅红色
              800: '#991B1B',    // 深一点的红色
              900: '#7F1D1D',    // 最深红色
            }
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      /* 导航栏样式 */
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-300 active:bg-red-800 h-full;
      }
      .nav-item.active {
        @apply text-white;
      }
      .nav-icon {
        @apply text-lg mb-1;
      }
      .nav-text {
        @apply text-xs;
      }

      /* 内容区块样式 */
      .user-section {
        @apply bg-red-800 rounded-lg p-4 mb-4 border border-red-700;
      }

      /* 表单样式 */
      .form-label {
        @apply block text-sm mb-2 font-medium;
      }
      .form-input {
        @apply w-full bg-red-900 border border-red-700 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-secondary;
      }

      /* 按钮样式 */
      .btn-wechat {
        @apply w-full bg-green-600 text-white py-2 rounded font-medium text-sm flex items-center justify-center gap-2;
      }
      .btn-disabled {
        @apply opacity-50 cursor-not-allowed;
      }
    }
  </style>
</head>
<body class="bg-primary text-white">
<div class="max-w-md mx-auto min-h-screen flex flex-col">
  <!-- 页面标题栏 -->
  <div class="py-4 px-4 border-b border-red-700 bg-red-900 flex justify-center items-center">
    <h1 class="text-xl font-bold">我的</h1>
  </div>

  <!-- 页面内容区 -->
  <div class="flex-1 overflow-y-auto p-4 pb-24">
    <!-- 用户信息 -->
    <div class="user-section text-center mb-6">
      <div class="relative w-24 h-24 mx-auto mb-3">
        <img id="userAvatar" src="https://picsum.photos/200/200?random=50" alt="用户头像" class="w-full h-full rounded-full object-cover border-2 border-secondary">
        <div class="absolute bottom-0 right-0 w-6 h-6 rounded-full bg-secondary flex items-center justify-center text-red-900 text-xs">
          <i class="fa fa-camera"></i>
        </div>
      </div>
      <h2 id="userName" class="text-lg font-bold">未登录</h2>
      <p id="userIdentity" class="text-sm text-gray-300 mt-1">当前身份：未登录</p>

      <!-- 微信授权登录按钮（未登录时显示） -->
      <button id="wechatAuthBtn" class="btn-wechat mt-3">
        <i class="fa fa-weixin"></i> 微信授权登录
      </button>
    </div>

    <!-- 身份认证（登录后显示） -->
    <div id="authSection" class="user-section hidden">
      <h3 class="text-base font-medium mb-3 flex items-center">
        <i class="fa fa-id-card text-secondary mr-2"></i>身份认证
      </h3>

      <div class="space-y-3">
        <p class="text-sm text-gray-200 mb-4">
          绑定评委身份后可参与作品评分
        </p>

        <div class="mb-3">
          <label class="form-label">选择身份类型</label>
          <select id="identityType" class="form-input">
            <option value="">请选择身份</option>
            <option value="student">学生评委</option>
            <option value="teacher">教师评委</option>
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label">账号</label>
          <input type="text" id="judgeAccount" class="form-input" placeholder="请输入评委账号">
        </div>

        <div class="mb-4">
          <label class="form-label">密码</label>
          <input type="password" id="judgePassword" class="form-input" placeholder="请输入评委密码">
        </div>

        <button id="bindJudgeBtn" class="w-full bg-secondary text-red-900 py-2 rounded font-medium text-sm">
          绑定身份
        </button>
      </div>
    </div>

    <!-- 我的作品 -->
    <div id="myWorksSection" class="user-section hidden">
      <h3 class="text-base font-medium mb-3 flex items-center justify-between">
        <span><i class="fa fa-book text-secondary mr-2"></i>我的作品</span>
        <a href="/h5/index" class="text-xs text-secondary">查看全部</a>
      </h3>

      <div class="text-center py-6 text-sm text-gray-300">
        <i class="fa fa-file-o text-3xl mb-2"></i>
        <p>您尚未提交任何作品</p>
        <a href="/h5/index_baoming" class="text-secondary mt-2 inline-block">立即参赛</a>
      </div>
    </div>

    <!-- 退出登录相关（登录后显示） -->
<!--    <div id="logoutSection" class="user-section hidden">-->
<!--      <div class="flex justify-between items-center py-2">-->
<!--        <div class="flex items-center text-sm">-->
<!--          <i class="fa fa-sign-out text-secondary mr-2"></i>-->
<!--          <span>退出登录</span>-->
<!--        </div>-->
<!--        <i class="fa fa-angle-right text-gray-400"></i>-->
<!--      </div>-->
<!--    </div>-->

    <!-- 退出登录按钮（登录后显示） -->
    <button id="logoutBtn" class="w-full mt-2 py-3 bg-red-900 border border-red-700 rounded font-medium text-sm hidden">
      退出登录
    </button>
  </div>

  <!-- 底部固定导航栏 -->
  <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-red-900 border-t border-red-700 z-50 h-16 flex">
    <a href="/h5/index" class="nav-item active flex-1">
      <i class="nav-icon fa fa-home"></i>
      <span class="nav-text">首页</span>
    </a>
    <a href="/h5/index_huodong" class="nav-item flex-1">
      <i class="nav-icon fa fa-calendar"></i>
      <span class="nav-text">活动</span>
    </a>
    <a href="/h5/index_paihangbang" class="nav-item flex-1">
      <i class="nav-icon fa fa-bar-chart"></i>
      <span class="nav-text">排行榜</span>
    </a>
    <a href="/h5/index_yonghu" class="nav-item flex-1">
      <i class="nav-icon fa fa-user"></i>
      <span class="nav-text">我的</span>
    </a>
  </div>
</div>

<script>
  // 等待DOM加载完成（jQuery写法）
  $(document).ready(function() {
    // DOM元素（jQuery选择器）
    const $wechatAuthBtn = $('#wechatAuthBtn');
    const $userName = $('#userName');
    const $userAvatar = $('#userAvatar');
    const $userIdentity = $('#userIdentity');
    const $authSection = $('#authSection');
    const $myWorksSection = $('#myWorksSection');
    const $logoutSection = $('#logoutSection');
    const $logoutBtn = $('#logoutBtn');
    const $bindJudgeBtn = $('#bindJudgeBtn');
    const $identityType = $('#identityType');
    const $judgeAccount = $('#judgeAccount');
    const $judgePassword = $('#judgePassword');
    const $navItems = $('.nav-item');

    // 导航栏切换效果
    $navItems.click(function(e) {
      e.preventDefault();
      $navItems.removeClass('active');
      $(this).addClass('active');
      // 跳转对应页面
      window.location.href = $(this).attr('href');
    });

    // 页面加载时获取登录用户信息（jQuery AJAX）
    $.ajax({
      url: '/h5/user/getLoginUser',
      type: 'GET',
      dataType: 'json',
      success: function(res) {
        if (res.code == 0) {
          // 已登录：更新用户信息
          const user = res.data;
          updateUserInfo(user);
          showLoginSections();
        } else {
          // 未登录：显示授权按钮
          showLogoutSections();
        }
      },
      error: function(error) {
        console.error('获取用户信息失败：', error);
        showLogoutSections();
      }
    });

    // 微信授权登录点击事件
    $wechatAuthBtn.click(function() {
      window.location.href = '/h5/user/wechat/auth';
    });

    // 身份绑定按钮事件（jQuery AJAX）
    $bindJudgeBtn.click(function() {
      const type = $identityType.val();
      const account = $judgeAccount.val().trim();
      const password = $judgePassword.val().trim();

      // 表单验证
      if (!type) {
        alert('请选择身份类型');
        return;
      }
      if (!account) {
        alert('请输入评委账号');
        return;
      }
      if (!password) {
        alert('请输入评委密码');
        return;
      }

      // 调用后台身份绑定接口
      $.ajax({
        url: '/h5/user/bindJudge',
        type: 'POST',
        data: {
          identityType: type,
          account: account,
          password: password
        },
        dataType: 'json',
        success: function(res) {
          if (res.code == 0) {
            alert('身份绑定成功！');
            // 更新用户身份显示
            const user = res.data;
            updateUserIdentity(user.userType);
          } else {
            alert(res.msg || '身份绑定失败');
          }
        },
        error: function(error) {
          console.error('绑定失败：', error);
          alert('网络错误，绑定失败');
        }
      });
    });

    // 退出登录事件
    $logoutBtn.click(function() {
      if (confirm('确定要退出登录吗？')) {
        window.location.href = '/h5/user/logout';
      }
    });

    // 退出登录选项点击事件
    $logoutSection.click(function(e) {
      e.preventDefault();
      if (confirm('确定要退出登录吗？')) {
        window.location.href = '/h5/user/logout';
      }
    });

    // 更新用户信息
    function updateUserInfo(user) {
      // 注意：后台User实体字段是userName，前端对应读取user.userName
      $userName.text(user.userName || '未命名用户');
      $userAvatar.attr('src', user.avatar || 'https://picsum.photos/200/200?random=50');
      updateUserIdentity(user.userType);
    }

    // 更新用户身份显示
    function updateUserIdentity(userType) {
      let identityText = '普通客户';
      if (userType === '03') {
        identityText = '学生评委';
        $bindJudgeBtn.prop('disabled', true).addClass('btn-disabled').text('已绑定学生评委');
      } else if (userType === '04') {
        identityText = '教师评委';
        $bindJudgeBtn.prop('disabled', true).addClass('btn-disabled').text('已绑定教师评委');
      }
      $userIdentity.text(`当前身份：${identityText}`);
    }

    // 显示登录后的页面区块
    function showLoginSections() {
      $wechatAuthBtn.hide();
      $authSection.show();
      $myWorksSection.show();
      $logoutSection.show();
      $logoutBtn.show();
    }

    // 显示未登录的页面区块
    function showLogoutSections() {
      $wechatAuthBtn.show();
      $authSection.hide();
      $myWorksSection.hide();
      $logoutSection.hide();
      $logoutBtn.hide();
    }
  });
</script>
</body>
</html>